<template>
  <content-card class="box-card" needFilter title="数据权限" show-reload @reload="getList">
    <template slot="right">
      <el-button v-if="!editable" type="text" icon="el-icon-plus" @click="handleAdd">添加权限</el-button>
      <el-button v-if="editable" type="text" icon="el-icon-circle-check" @click="handleSubmit">保存</el-button>
      <el-button v-if="editable" type="text" icon="el-icon-circle-close" @click="handleCancel">取消</el-button>
    </template>
    <template v-slot:content>
      <div v-if="editable">
        <el-checkbox v-model="tree.expandAll" @change="handleExpandAll">展开/折叠</el-checkbox>
        <el-checkbox v-model="tree.checktedAll" @change="handleCheckedAll">全选/全不选</el-checkbox>
        <el-checkbox v-model="tree.strictly" @change="handleCheckStrictly">父子联动</el-checkbox>
        <a-tree class="tree-border" checkable :tree-data="tree.data" :check-strictly="!tree.strictly"
                v-model:expandedKeys="tree.expandKeys" v-model:selectedKeys="tree.selectedKeys"
                v-model:checkedKeys="tree.strictly ? tree.checkedKeys : tree.checked"
                style="text-align: left;height:200px;overflow: auto" @select="handleSelected" @check="handleChecked"
                @expand="handleExpand"/>
      </div>
      <div v-else>
        <el-form ref="queryForm" :inline="true" :model="queryParams" class="search-form" label-suffix="："
                 label-width="100px">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="queryParams.menuName" clearable placeholder="请输入菜单名称"
                      @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" type="info" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-if="refreshTable" class="list-table" row-key="id" slot="list" border v-loading="loading"
                  :data="dataList" :lazy="true" :load="getChild"
                  :tree-props="{children: 'children', hasChildren: 'hasChild'}" height="400px">
          <el-table-column label="部门名称" min-width="150px" prop="name" show-overflow-tooltip/>
          <el-table-column label="部门编号" min-width="120px" prop="code" show-overflow-tooltip/>
          <el-table-column label="部门类型" min-width="120px" prop="type">
            <template slot-scope="scope">
              <dict-tag :options="localDict.dept_type" :value="scope.row.type" show-label/>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="100px" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="localDict.dept_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="排序" min-width="50px" prop="sort"/>
          <el-table-column label="部门描述" min-width="160px" prop="remark" show-overflow-tooltip/>
        </el-table>
      </div>
    </template>
  </content-card>
</template>

<script>
import {keys, remove, save} from "../../../../api/base";
import {child, root, treeselect} from "../../../../api/tree";
import {getStaticData} from "../../../../api/common";

export default {
  name: "ScopeCard",
  props: {
    roleId: String,
  },
  data() {
    return {
      loading: false,
      mainUrl: '/system/dept/',
      baseUrl: '/system/role/dept/',
      commonUrl: '/api/system/static/',
      editable: false,
      dataList: [],
      queryParams: {},
      // 重新渲染表格状态
      refreshTable: true,
      localDict: {
        dept_type: [],
        dept_status: []
      },
      tree: {
        keys: [],
        data: [],
        expandAll: false,
        checkedAll: false,
        strictly: false,
        expandKeys: [],
        checked: {},
        checkedKeys: [],
        selectedKeys: [],
        halfCheckedKeys: []
      },
    }
  },
  created() {
    this.getLocalDict()
    this.getList()
  },
  methods: {
    getLocalDict() {
      treeselect(this.mainUrl, {}).then(res => {
        this.tree.keys = res.data.keys
        this.tree.data = res.data.datas
      })
      this.getStaticData('system-status').then(res => {
        this.localDict.dept_status = res.data
      })
      this.getStaticData('system-dept-type').then(res => {
        this.localDict.dept_type = res.data
      })
      this.getStaticData('system-status', '/api/system/static/').then(res => {
        this.localDict.role_status = res.data
      })
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      this.loading = true;
      root(this.mainUrl, {...this.queryParams, roleId: this.roleId}).then(response => {
        this.dataList = response.data;
        this.loading = false;
      });
    },
    // 树形动态加载表单数据：
    getChild(tree, treeNode, resolve) {
      child(this.mainUrl, tree.id, {...this.queryParams, roleId: this.roleId}).then((res) => {
        return resolve(res.data);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageParam.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      keys(this.baseUrl, {roleId: this.roleId}).then(res => {
        this.tree.checkedKeys = res.data
        this.tree.selectedKeys = res.data
        this.editable = true
      })
    },
    handleEdit(row) {
      this.editable = true
      this.formdata = {...row}
    },
    handleDelete(row) {
      this.$modal.confirm('是否确认删除选中的数据项？').then(() => {
        remove(this.baseUrl, row.id).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
          this.single = true;
        }).catch(() => {
        })
      });
    },
    handleExpand(expandedKeys) {
      this.tree.expandKeys = expandedKeys
    },
    handleChecked(checkedKeys, {halfCheckedKey}) {
      if (this.tree.strictly) {
        this.tree.checkedKeys = checkedKeys
        this.tree.halfCheckedKeys = halfCheckedKey
      } else {
        this.tree.checked = checkedKeys
        this.tree.halfCheckedKeys = checkedKeys.halfChecked
        this.tree.checkedKeys = checkedKeys.checked
      }
    },
    handleSelected(selectedKeys) {
      this.tree.selectedKeys = selectedKeys
    },
    handleCheckedAll(val) {
      this.tree.checktedAll = val
      this.tree.checkedKeys = []
      if (this.tree.checktedAll) {
        this.tree.checkedKeys = this.tree.checkedKeys.concat(this.tree.keys)
      }
    },
    handleExpandAll(val) {
      this.tree.expendAll = val
      this.tree.expandKeys = []
      if (this.tree.expendAll) {
        this.tree.expandKeys = this.tree.expandKeys.concat(this.tree.keys)
      }
    },
    handleCheckStrictly(val) {
      this.tree.strictly = val
      if (!val) {
        this.tree.checked = {
          checked: [],
          halfChecked: []
        }
        this.tree.checked.checked = this.tree.checked.checked.concat(this.tree.checkedKeys)
        this.tree.checked.halfChecked = this.tree.checked.halfChecked.concat(this.tree.halfCheckedKeys)
      }
    },
    handleSubmit() {
      let deptIds = this.tree.strictly ? this.tree.checkedKeys.concat(this.tree.halfCheckedKeys) : this.tree.checkedKeys
      save(this.baseUrl, {roleId: this.roleId, deptIds: deptIds}).then(res => {
        this.$modal.msgSuccess('保存成功')
        this.editable = false
        this.getList()
      })
    },
    handleCancel() {
      this.editable = false
    },
  }
}
</script>

<style scoped>

</style>
